<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			*{margin:0;padding:0;font-family: "微软雅黑";}
			a{text-decoration: none;}
			html,body{height:100%;}
			body{background: #f3eff0;}
			#out{height:100%;display: -webkit-box;-webkit-box-orient: vertical;}
			header{height:88px;line-height: 88px;font-size: 36px;color:#fff;background: #a90506;text-align: center;}
			article{-webkit-box-flex: 1;padding-top:30px;}
			.user,.pass{display: block;width:560px;height:86px;background:#fff;margin:4px auto;font-size: 24px;padding-left:20px;border-radius: 5px;border: 0;}
			.mima1{margin:50px;font-size: 30px;}
			.check1,.check2{width:40px;height:40px;vertical-align: middle;}
			.mima1 span,.mima2 i{padding:0 35px 0 12px;}
			.mima1 a{color:#ff0e54;}
			.mima2{margin:0 0 50px 50px;font-size: 30px;}
			.mima2 i{font-style: normal;}
			.sub,.zhu{width:580px;height:90px;margin:10px auto;border-radius: 10px;display: block;font-size: 34px;line-height: 90px;text-align: center;}
			.sub{background:url(img/submit1.jpg) repeat-x;border: 0;color:#fff;}
			.zhu{background:#545454;color:#fff;margin-bottom:200px;}
		</style>
	</head>
	<body>
		<section id="out">
			<header>开心摇摇用户登录</header>
			<article>
				<input type="text" class="user" placeholder="请输入账户名" />
				<input type="password" class="pass" placeholder="请输入密码" />
				
				<section class="mima1">
					<input type="checkbox" class="check1"/>
					<span>显示密码</span>
					<a href="javascript:;">忘记密码？</a>
				</section>
				<section class="mima2">
					<input type="checkbox" class="check2" checked="checked"/>
					<i>记住密码自动登录</i>
				</section>
				
				<input type="submit" class="sub" value="登录"/>
				<a class="zhu" href="#">注册</a>
			</article>
		</section>
		
	</body>
	<script src="js/jquery183.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			bodyScale(640);			
			
			$('.sub').click(function(){
				$.ajax({
					type:"get",
					url:"http://datainfo.duapp.com/shopdata/userinfo.php",
					async:true,
					data:{
						status:"login",
						userID:$('.user').val(),
						password:$('.pass').val()
					},
					success:function(data){
						console.log(data);
						switch (data){
							case "0":alert("用户名不存在");
								break;
							case "2":alert("账号密码不符");
								break;
							default:alert("登陆成功,点击跳转");
									localStorage.setItem('user',$('.user').val());
									window.open("index1.html","_self");
								break;
						}
					}
				});
			})
			
			function bodyScale(n){	//屏幕宽度自适应
				var devicewidth=document.documentElement.clientWidth;
				var scale=devicewidth/n;
				document.body.style.zoom=scale;
			}
			window.onresize=function(){			
				bodyScale(640);		
			}
		})
	</script>
</html>
